<template>
    <van-popup
            class="common-popup_select-wrap"
            safe-area-inset-bottom
            v-model="visible"
            round
            position="bottom"
            :style="{ height: '70%' }"
            @closed="close"
    >
        <div class="content-wrap">
            <van-search class="custom-search-yellow" :placeholder="placeholder" v-model="queryCondition[searchKey]">
                <van-button slot="right-icon" class="button" @click="handleSearch">搜索</van-button>
            </van-search>

            <div v-if="visible" class="select-list" ref="scrollWrapRef">
                <van-list v-model="nextLoading" :finished="isPageLast" finished-text="没有更多了" @load="queryNextPage">
                    <slot v-for="(item, index) in page.data" :row="item" :index="index" :selected="selectedItem && selectedItem[primaryKey] === item[primaryKey]" :onSelect="handleSelectItem"/>
                </van-list>
            </div>

            <van-button class="custom-button-blue submit-button" round block :disabled="$isEmpty(selectedItem)" @click="handleConfirm">{{$isEmpty(selectedItem) ? '请选择数据' : '确认'}}</van-button>
        </div>
    </van-popup>
</template>

<script>
/**
 * <popup-select ref="selectHospitalRef" apiName="common" apiMethod="queryHospitalPage" searchKey="name" placeholder="请输入医院名称">
        <div class="hospital-item common-popup_select_item" slot-scope="{row, onSelect, selected}" :key="row.id" @click="onSelect(row)">
            <div class="text">
                <span class="name">{{row.name}}</span>
            </div>
            <van-checkbox class="checkbox" :value="selected"/>
        </div>
    </popup-select>

    this.__openDialog('selectHospitalRef', {
        selectedId: this.formData.pk_hospital, //回显已选中数据
        callback: doctor => { //本次选中的数据
            this.$set(this.formData, 'hospitalname', doctor.name);
            this.$set(this.formData, 'pk_hospital', doctor.id);
        }
    });
 */

import JBoot, {Utils} from 'jboot-env';
    import {Popup, Search, List, Button, Checkbox, Toast} from 'vant';

    export default JBoot.dialogH5Page({
        name: 'PopupSelect',

        components: {
            [Popup.name]: Popup,
            [Search.name]: Search,
            [List.name]: List,
            [Button.name]: Button,
            [Checkbox.name]: Checkbox,
        },

        props: {
            apiName: String,

            apiMethod: String,

            initLoad: Boolean,

            data: Array,

            searchKey: { //搜索时传的参数名
                type: String,
                default: 'keyword'
            },

            primaryKey: { //主键字段
                type: String,
                default: 'id'
            },

            placeholder: {
                type: String,
                default: '请输入关键字搜索'
            }
        },

        data (){
            return {
                moduleName: this.apiName,
                queryMethod: this.apiMethod,
                selectedItem: undefined
            }
        },

        created() {
            this.initLoad && this.queryHandler();
        },

        methods: {
            isExecuteQuery(_queryCondition) {
                const {initLoad, visible, data} = this;

                if(Utils.isNotEmpty(data)){
                    this.$set(this.page, 'data', data);

                    return new Promise((resolve, reject) => {
                        this.$nextTick(function () {
                            this.queryAfterHandler();

                            this.nextPageFlag = true;

                            reject();
                        });
                    });
                }

                return initLoad || visible;
            },

            handleSearch (){
                this.$getRef('scrollWrapRef')?.scrollTo(0, 0);

                this.searchLoading = Toast.loading({
                    message: '正在查询...',
                    forbidClick: true
                });

                this.refreshPage();
            },

            queryAfterHandler() {
                const {selectedItem, page, parentParam: {selectedId}, primaryKey, searchLoading} = this;

                searchLoading && searchLoading.clear();

                if(Utils.isEmpty(selectedItem) && Utils.isNotEmpty(selectedId)){
                    this.$set(this, 'selectedItem', page.data.find(item => item[primaryKey] === selectedId));
                }

                this.nextPageFlag === false && this.$emit('loaded', Utils.blank2Default(this.page.data, []));
            },

            handleSelectItem (item){
                this.$set(this, 'selectedItem', item);
            },

            handleConfirm (){
                this.parentParam?.callback(this.selectedItem);

                this.close();
            },

            closeAfterHandler() {
                this.handleSelectItem(undefined);
            }
        },

        watch: {
            'parentParam.selectedId': {
                immediate: true,
                handler (v){
                    const {selectedItem, page, primaryKey} = this;

                    if(Utils.isEmpty(selectedItem) && Utils.isNotEmpty(page.data)){
                        this.$set(this, 'selectedItem', page.data.find(item => item[primaryKey] === v));
                    }
                }
            }
        }
    });
</script>

<style lang="scss">
    .common-popup_select-wrap {
        & .content-wrap{
            display: flex;
            flex-direction: column;
            height: calc(100% - 25px * 2);
            padding: 25px;
            & > div[class*="search"]{
                padding: 0;
            }
            & > .select-list{
                margin: 25px 0;
                flex: 1;
                overflow: auto;
                background-color: #f7f8fa;
                padding: 20px;
                border-radius: 10px;
                & > div[class*="list"]{

                }
            }
            & > .submit-button{
                height: 80px;
            }
        }
    }
</style>
